import React, {PureComponent} from 'react';
import {Menu} from 'antd';
import classNames from 'classnames';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.module.less';
import {isEmpty, isFunction} from "lodash-es";
import BaseComp from "../Base/BaseComp";

export default class SelectLang extends BaseComp {
    changeLang = ({key}) => {
        const {localeUtils} = this.helpers;
        if (!isEmpty(localeUtils)) {
            localeUtils.changeLocale(key);
        }

    };

    mainRender(context) {
        // console.log('locale', this.props.locale);
        const {className} = this.props;
        const {localeUtils} = this.helpers;
        const selectedLang = localeUtils && isFunction(localeUtils.getLocale) ? localeUtils.getLocale() : 'zh-CN';
        const locales = [
            'zh-CN',
            // 'zh-TW',
            'en-US',
            // 'pt-BR',
        ];
        const languageLabels = {
            'zh-CN': '简体中文',
            // 'zh-TW': '繁体中文',
            'en-US': 'English',
            // 'pt-BR': 'Português',
        };
        const languageIcons = {
            'zh-CN': '🇨🇳',
            // 'zh-TW': '🇭🇰',
            'en-US': '🇺🇸',
            // 'pt-BR': '🇧🇷',
        };
        const langMenu = (
            <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changeLang}>
                {locales.map((locale) => (
                    <Menu.Item key={locale}>
            <span role="img" aria-label={languageLabels[locale]}>
              {languageIcons[locale]}
            </span>{' '}
                        {languageLabels[locale]}
                    </Menu.Item>
                ))}
            </Menu>
        );
        return (
            <HeaderDropdown overlay={langMenu} placement="bottomRight">
                {
                    this.props.btnJsx ? (this.props.btnJsx) : (
                        <span className={classNames(styles.dropDown, className, 'text-primary')}>
          {
              localeUtils ? localeUtils.formatMsgByCn('语言') : '语言'
          }
                            {/*<Icon type="global" title={formatMessage({ id: 'navBar.lang' })}/>*/}
        </span>
                    )
                }
            </HeaderDropdown>
        );
    }
}


